<template>
    <el-container>
        <el-main>
            <el-row>
                <el-col :span="24">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>用户列表</span>
                            <el-button-group style="float: right">
                                <el-button type="primary" size="mini" @click.native="addUserForm">新增用户</el-button>
                                <el-button type="primary" size="mini" @click.native="queryUserForm">查询用户</el-button>
                                <el-button type="primary" size="mini" @click.native="queryUser">重置查询</el-button>
                            </el-button-group>
                        </div>
                        <el-table
                                :data="userData"
                                style="width: 100%"
                                height="400"
                                highlight-current-row
                                @row-click="onRowClick"
                        >
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="username"
                                    label="账户"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="phone"
                                    label="电话号码">
                            </el-table-column>

                            <el-table-column
                                    prop="email"
                                    label="邮箱">
                            </el-table-column>
                            <el-table-column
                                    label="是否可用"
                                    prop="enabled">
                                <template v-slot="scope">
                                    <dict-select codeName="enabled"
                                                 :dictValue.sync="scope.row.enabled"
                                                 :disabled="true"
                                    />
                                </template>
                            </el-table-column>

                            <el-table-column
                                    label="操作"
                                    width="200">
                                <template v-slot="scope">
                                    <el-button @click="editUser(scope.row)"
                                               type="primary"
                                               icon="el-icon-edit"
                                               size="mini"
                                               circle/>
                                    <el-button @click="deleteUser(scope.row)"
                                               icon="el-icon-delete-solid"
                                               type="danger"
                                               size="mini" circle/>
                                    <el-button @click="resetPassword(scope.row)"
                                               type="primary"
                                               size="mini"
                                    >重置密码</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页插件-->
                        <div>
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="userPage.total"
                                    :page-size="userPage.size"
                                    :current-page.sync="userPage.current"
                                    @current-change="queryUser"
                            />
                        </div>
                    </el-card>
                   <!-- 用户新增、编辑窗口-->
                    <user-info-editor
                            :title="dialog.userDialog.title"
                            :show.sync="dialog.userDialog.show"
                            :add="dialog.userDialog.add"
                            :user-info="dialog.userDialog.userInfo"
                            @refreshUser="queryUser"
                    />
                    <!--密码重置窗口-->
                    <user-password-reset
                            :title="dialog.pwdDialog.title"
                            :show.sync="dialog.pwdDialog.show"
                            :user-info="dialog.pwdDialog.userInfo"
                    />
                    <!--用户查询窗口-->
                    <query-user
                            :title="dialog.queryDialog.title"
                            :show.sync="dialog.queryDialog.show"
                            @queryUser="queryUserByCondition"
                    />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-card class="box-card">
                        <el-tabs v-model="activeTab">
                            <el-tab-pane label="关联角色" name="roleRelationship">
                                <el-button-group>
                                    <el-button
                                            type="primary"
                                            size="mini"
                                            @click="editRoleForUser"
                                            :disabled="!userSelected">管理用户关联角色</el-button>
                                </el-button-group>
                                <div style="padding-top: 20px">
                                    <template v-for="role in roleInfo" >
                                        <el-tag style="margin-right: 10px">{{role.roleName}}</el-tag>
                                    </template>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="关联组织机构" name="unitRelationship">
                                <el-button-group>
                                    <el-button
                                            type="primary"
                                            size="mini"
                                            @click="editOrgForUser"
                                            :disabled="!userSelected">管理用户关联机构</el-button>
                                </el-button-group>

                                <div style="padding-top: 20px">
                                    <el-tag v-show="orgInfo.id !=null">{{orgInfo.orgName}}</el-tag>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                    <user-role
                        :show.sync="dialog.roleDialog.show"
                        :role-info="dialog.roleDialog.roleInfo"
                        :user-info="dialog.roleDialog.userInfo"
                        :title="dialog.roleDialog.title"
                        @refreshRole="findRoleByUserId"
                    />
                    <user-org
                            :show.sync="dialog.orgDialog.show"
                            :role-info="dialog.orgDialog.orgInfo"
                            :user-info="dialog.orgDialog.userInfo"
                            :title="dialog.orgDialog.title"
                            @refreshOrg="findOrgByUserId"
                    />
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    import {listUser} from "@/api/user";
    import {deleteUser} from "@/api/user";
    import DictSelect from "@/components/SysDictSelect";
    import UserInfoEditor from "@/views/modules/user/UserInfoEditor";
    import UserPasswordReset from "@/views/modules/user/UserPasswordReset";
    import QueryUser from "@/views/modules/user/QueryUser";
    import {defaultQueryPage} from "@/lib/QueryPageUtil";
    import {defaultResultPage} from "@/lib/QueryPageUtil";
    import {findRoleByUserId} from "@/api/userRole";
    import UserRole from "@/views/modules/user/UserRole";
    import {findOrgByUserId} from "@/api/userOrg";
    import UserOrg from "@/views/modules/user/UserOrg";

    export default {
        name: "UserManager",
        components:{
            DictSelect,
            UserInfoEditor,
            UserPasswordReset,
            QueryUser,
            UserRole,
            UserOrg,
        },
        data() {
            return {
                //用户是否被选中
                userSelected:false,
                roleInfo:[],
                orgInfo:{},
                //默认激活的tab页面
                activeTab:"roleRelationship",
                dialog:{
                    //用户详细信息dialog
                    userDialog:{
                        show:false,
                        title:"",
                        add:"",
                        userInfo:{}
                    },
                    //密码重置dialog
                    pwdDialog:{
                        show:false,
                        title:"",
                        userInfo:{}
                    },
                    //用户查询dialog
                    queryDialog:{
                        show:false,
                        title:"",
                    },
                    //角色管理dialog
                    roleDialog:{
                        title:null,
                        show:false,
                        roleInfo:[],
                        userInfo:{
                            userId:null,
                            account:null
                        }
                    },
                    //组织机构管理dialog
                    orgDialog:{
                        title:null,
                        show:false,
                        orgInfo:[],
                        userInfo:{
                            userId:null,
                            account:null,
                            name:null
                        }
                    }
                },
                userData:[],
                //翻页数据
                userPage: defaultQueryPage(),
            }
        },
        mounted(){
            this.queryUser();
        },
        methods:{
            //查询用户信息
            queryUser(){
                listUser(this.userPage)
                    .then(res => {
                        this.userData = [...res.data.records]
                        defaultResultPage(res.data,this.userPage);
                    }).catch(err => {
                    this.$message.error(err.message)
                })
            },
            //用户编辑
            editUser(row){
                this.dialog.userDialog.show = true
                this.dialog.userDialog.title = "用户编辑"
                this.dialog.userDialog.add = false;
                this.dialog.userDialog.userInfo = row;
            },
            //用户删除
            deleteUser(row){
                if(row.username == "admin"){
                    this.$message({
                        type:"error",
                        message:"admin用户不能删除"
                    })
                    return;
                }
                let msg = "是否确认删除("+row.name+" "+row.username+")"
                this.$confirm(msg,"删除确认提示",{
                    type:"warning"
                }).then(()=>{
                    deleteUser({userId:row.id})
                        .then(res =>{
                            this.$message({
                                type:"success",
                                message:"删除成功！"
                            })
                            this.queryUser();
                        }).catch(err =>{
                            this.$message({
                                type:"error",
                                message:err.message
                            })
                    })
                }).catch(()=>{})

            },
            //打开新增用户窗口
            addUserForm(){
                this.dialog.userDialog.show = true
                this.dialog.userDialog.title = "用户新增"
                this.dialog.userDialog.add = true;
                this.dialog.userDialog.userInfo = {};
            },
            //打开查询用户窗口
            queryUserForm(){
                this.dialog.queryDialog.show = true
                this.dialog.queryDialog.title="用户查询"
            },
            //打开重置密码窗口
            resetPassword(row){
                this.dialog.pwdDialog.show = true
                this.dialog.pwdDialog.title = "密码重置"
                this.dialog.pwdDialog.userInfo = {id:row.id}
            },
            //设置查询参数，然后查询
            queryUserByCondition(queryInfo){
                this.userPage = {...queryInfo};
                this.queryUser()
            },
            //选中用户触发的操作
            onRowClick(row){
                this.userSelected = true;
                let param = {id:row.id,account:row.username,name:row.name}
                this.findRoleByUserId(param)
                this.findOrgByUserId(param)

            },
            //根据用户Id查询关联角色
            findRoleByUserId(param){
                this.dialog.roleDialog.userInfo.userId = param.id;
                this.dialog.roleDialog.userInfo.account = param.account;
                this.dialog.roleDialog.title = "关联角色修改("+param.name+")";
                let userData = {userId:param.id}
                findRoleByUserId(userData)
                    .then(res =>{
                        this.roleInfo = [...res.data]
                    }).catch(err => {
                    this.$message.error(err.message)
                })
            },
            //根据用户Id查询关联组织结构
            findOrgByUserId(param){
                this.dialog.orgDialog.userInfo.userId = param.id;
                this.dialog.orgDialog.userInfo.account = param.account;
                this.dialog.orgDialog.userInfo.name = param.name;
                this.dialog.orgDialog.title = "关联组织机构修改("+param.name+")";
                let userData = {userId:param.id}
                findOrgByUserId(userData)
                    .then(res =>{
                        this.orgInfo = {...res.data}
                    }).catch(err => {
                    this.$message.error(err.message)
                })
            },
            //打开角色编辑dialog
            editRoleForUser(){
                this.dialog.roleDialog.show = true;
                this.dialog.roleDialog.roleInfo = [...this.roleInfo];
            },
            //打开组织机构编辑dailog
            editOrgForUser(){
                this.dialog.orgDialog.show = true;
                this.dialog.orgDialog.orgInfo = {...this.orgInfo};
            }
        },

    }
</script>

<style scoped>

</style>